<template>
  <div class="MicPowerGenerationbox">
    <div class="leftbox">
      <HavucheckTree @handClick="handClick" @chushihua="chushihua"></HavucheckTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <div>
          <el-radio-group v-model="radio3" size="small" style="margin-right: 10px;">
            <el-radio-button label="1">日</el-radio-button>
            <el-radio-button label="2">月</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker v-if="radio3=='1'" v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small"></el-date-picker>
          <el-date-picker v-if="radio3=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small"></el-date-picker>
          <el-date-picker v-if="radio3=='3'" v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small"></el-date-picker>
        </div>
        <div>
          <el-button @click="chongzhi" size="small">重置</el-button>
          <el-button type="primary" @click="gettablelist" size="small">查询</el-button>
        </div>
      </div>
      <div class="rightbutton">
        <div class="titlebox">
          <div>
            <i :style="{color:isshow?'#007cee':'','margin-right': '15px'}" @click="toimg" class="iconfont icon-zhuzhuangtutubiao"></i>
            <i :style="{color:isshows?'#007cee':''}" @click="totab" class="iconfont icon-biaoge"></i></div>
          <div class="righttitle">
            <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="tabandech">
          <div class="echartbox" v-show="isshow">
            <div class="fadianlv" ref="fadianlv"></div>
            <div class="fuzhaodu" ref="fuzhaodu"></div>
          </div>
          <div class="tablebox" v-show="isshows">
            <el-table
              :data="biaogeshuju"
              :size="issize"
              border
              ref="table"
              :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
              v-loading="loading"
              height="calc(100% - 1px)"
              style="width: 100%">
              <template slot="empty">
                <el-empty description="暂无数据"></el-empty>
              </template>
              <el-table-column
                prop="name"
                width="120"
                fixed
                v-if="biaogeshuju.length"
                label="设备">
              </el-table-column>
              <el-table-column
              v-for="(item,index) in tabletimePoints"
              :key="index"
                :prop="item"
                width="150"
                align="right"
                :label="item">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ColorList} from '@/utils/array'
import HavucheckTree from '../component/CheckTree.vue'
import TopTile from '@/components/TopTitle/index.vue'
import * as echarts from 'echarts';
import { exportexcel } from '@/utils/excel'
import {getfadianquxianapi,getfushequxianapi} from '@/api/Microgrid/Statistics/MicPowerGeneration'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    HavucheckTree
  },
  data() {
    return {
      loading:false,
      isshow:true,
      isshows:false,
      radio3: '1',
      value1:'',
      value2:'',
      value3: '',
      issize: 'medium',
      tableData: [],
      threelist: [],
      biaogeshuju: [],
      tabletimePoints:[]
    };
  },

  mounted() {
    this.gettime()
    this.getfadianlv(true)
    this.getfuzhaodu(true)
  },

  methods: {
    chushihua(val) {
      this.handClick(val)
    },
    handClick(val) {
      this.threelist = val
      this.gettablelist()
      // this.$nextTick(()=>this.$refs.table.doLayout())
    },
    // 查询
    async gettablelist() {
      if (this.threelist.length) {
        await this.getfadianlv()
        this.getfuzhaodu()
        this.$nextTick(()=>this.$refs.table.doLayout())
      } else {
        this.$message.warning('请先选择数据')
        await this.getfadianlv(true)
        this.getfuzhaodu(true)
        this.tabletimePoints = []
        this.biaogeshuju=[]
      }

    },
    // 处理表格数据
    gettablelis() {
      this.biaogeshuju.forEach(ele => {
        ele.datalist.map((item, index) => {
          ele[item.timeReading]=item.valueReading
        })
      })
    },
    // 重置
    chongzhi() {
      this.radio3 = '1'
      this.gettime()
      this.gettablelist()
    },
    toimg() {
      this.isshow=true;
      this.isshows=false;
    },
    totab() {
      this.isshows=true;
      this.isshow=false;
    },
    // 获取发电功率图表
    async getfadianlv(flag) {
      var chartDom = this.$refs.fadianlv
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      if (!flag) {
        this.loading=true
        const contrastString=this.threelist.map(ele =>ele.id )
      const { data: { list } } = await getfadianquxianapi({
        dateString:this.radio3=='1'?this.value1:this.radio3=='2'?this.value2:this.value3,
        dateType:this.radio3,contrastString:contrastString.join(',')
      })
        this.biaogeshuju = list
        this.biaogeshuju.forEach(ele => {
          ele.datalist.map((item, index) => {
            ele[item.timeReading]=item.valueReading
          })
        })
      var timePoints =list.find(ele=>ele.datalist.length)?.datalist.map(item=>item.timeReading)
        this.tabletimePoints = timePoints
      this.loading=false
      var series = list.map((ele,index) => {
        return {
            name:ele.name,
            data:ele.datalist.map(ele=>ele.valueReading),
            type: 'line',
            smooth: true,
            // areaStyle: {
              // normal: {
              //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
              // color: new echarts.graphic.LinearGradient(
              //   0, 0, 0, 1,
              // [
              //   { offset: 0,color:ColorList[index],},
              //   { offset: 1, color: '#fff' }
              // ]
              // )
              // }
            }
          // }
       })
      }
      option = {
        // color:['#5087ec','#f2bd42'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: flag?[]:timePoints
        },
        grid: {
          left: '4%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        yAxis: {
          type: 'value',
          name:'发电功率(kWh)',
          nameTextStyle:{
            color:'#606266',
            fontSize:14,
            padding:[0,40,10,0]
          }
        },
        series:flag?[]: series
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 获取辐射度图表
    async getfuzhaodu(flag) {
      var chartDom = this.$refs.fuzhaodu
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      if (!flag) {
        const contrastString =[]
        this.threelist.map(ele => {
          if (ele.epowerSystemId) {
            contrastString.push(ele.epowerSystemId?ele.epowerSystemId+'_'+ele.id:ele.id+'_'+ele.id)
           }
        })
        const { data: { list } } = await getfushequxianapi({
          dateString:this.radio3=='1'?this.value1:this.radio3=='2'?this.value2:this.value3,
          dateType:this.radio3,contrastString:contrastString.join(',')
        })
        var timePoints =list.find(ele=>ele.datalist.length)?.datalist.map(item=>item.timeReading)
        var series = list.map((ele,index) => {
          return {
              name:ele.name.slice(-2)=='温度'?ele.name+ '℃':ele.name+'W/m²',
              data: ele.datalist.map(ele => ele.valueReading),
              yAxisIndex:ele.name.slice(-2)=='温度'?1:null,
              type: 'line',
              smooth: true,
              // areaStyle: {
                // normal: {
                //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                // color: new echarts.graphic.LinearGradient(
                //   0, 0, 0, 1,
                // [
                //   { offset: 0,color:ColorList[index],},
                //   { offset: 1, color: '#fff' }
                // ]
                // )
                // }
              // }
            }
        })
      }
      option = {
        color:['#5087ec','#f2bd42'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: flag?[]:timePoints
        },
        grid: {
          left: '2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        yAxis:[{
          type: 'value',
          name:'辐照度(W/m²)',
          nameTextStyle:{
            color:'#606266',
            fontSize:14,
            padding:[0,-40,10,0]
          }
        },
          {
            type: 'value',
            name: '温度(℃)',
            nameTextStyle:{
            color:'#606266',
            fontSize:14,
            padding:[0,40,10,0]
          },
          }] ,
        series:flag?[]:series
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 导出
    daochu() {
      const contrastString =[]
      this.threelist.map(ele =>contrastString.push(ele.id) )
      exportexcel('mgd-microservice-biz/mgd/inverter/power/curve/export', {
        dateString:this.radio3=='1'?this.value1:this.radio3=='2'?this.value2:this.value3,
        dateType:this.radio3,contrastString:contrastString.join(',')
      },'发电功率')
    },
    // 刷新
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this,'value1',year+'-'+month+'-'+day)
      this.$set(this,'value2',year+'-'+month)
      this.$set(this,'value3',year.toString())
    },
  },
};
</script>

<style scoped>
.MicPowerGenerationbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    margin-right: 10px;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    .righttop{
      height:80px;
      background-color: #fff;
      line-height: 80px;
      padding: 0 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .button{
        width: 60px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-left: 10px;
      }
      .sure{
        color: #fff;
        background-color: #1890ff;
      }
    }
    .rightbutton{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .titlebox{
      display: flex;
      justify-content:space-between;
      align-items: center;
      margin-bottom: 10px;
      i{
          margin-right: 15px;
          font-size: 18px;
        }
        i:hover{
        cursor:pointer ;
        color: #1890ff;
       }
      .righttitle{
        display: flex;
        align-items: center;

      }
        .text{
          margin: 0 20px;
        }
        .wen{
          cursor:pointer ;
          padding-bottom: 2px;
        }
        .wen:hover{
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
        }
      }
      .tabandech{
        height: 95%;
        .echartbox, .tablebox{
          height: 100%;
        }
        .echartbox{
          .fadianlv, .fuzhaodu{
            height: 50%;
          }
        }
      }
    }
  }
}
</style>